import React, {useState, useEffect} from "react";
import {
    // Divider, 
    Input, 
    Select,
    // DatePicker,
    Button,
    notification
} from "antd";
// import moment from "moment";
// import City from "../../../../components/City"
import http from "../../../../request";

const { Option } = Select;
const { TextArea } = Input;

const Tab1_1 = (props) => {
    const {id, setId, close, refresh,  change} = props;
    const [form, setForm] = useState({});
    const [show, setShow] = useState(!1)

    useEffect(() => {
        !id && setShow(!0)
        id && detail()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        show && (
            <div className="container">
                {/* <div className="part-title">详细信息</div> */}
                <div className="u-flex u-m-t-10">
                    <div className="label ">建筑面积</div>
                    <Input placeholder="0" onChange={e => formChange('built_up_area', e.target.value)} value={form.built_up_area} className="u-m-l-10" style={{width: 250}} />
                    <div className="label u-m-l-5">㎡</div>
                    <div className="label u-m-l-50">结构</div>
                    <Select placeholder="结构" onChange={e => formChange('structure', e)} value={form.structure} className="u-m-l-14" style={{width: 240}}>
                        <Option value="砖木结构">砖木</Option>
                        <Option value="砖混结构">砖混</Option>
                        <Option value="钢筋混凝土结构">钢筋混凝土</Option>
                        <Option value="钢结构">钢</Option>
                    </Select>
                    <div className="label u-m-l-30">土地</div>
                    <Select placeholder="土地" onChange={e => formChange('land', e)} value={form.land} className="u-m-l-8" style={{width: 310}}>
                        <Option value="国有">国有</Option>
                        <Option value="集体">集体</Option>
                        <Option value="住宅">住宅</Option>
                        <Option value="工业">工业</Option>
                        <Option value="商业">商业</Option>
                        <Option value="国防">国防</Option>
                        <Option value="教育">教育</Option>
                        <Option value="公共事业">公共事业</Option>
                    </Select>
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label u-m-l-5">总户数</div>
                    <Input placeholder="0.00" onChange={e => formChange('total_households', e.target.value)} value={form.total_households} className="u-m-l-18" style={{width: 250}} />
                    <div className="label u-m-l-5">户</div>
                    <div className="label u-m-l-50">外墙</div>
                    <Select placeholder="外墙" onChange={e => formChange('exterior_wall', e)} value={form.exterior_wall} className="u-m-l-15" style={{width: 240}}>
                        <Option value="涂料">涂料</Option>
                        <Option value="面砖">面砖</Option>
                        <Option value="石材">石材</Option>
                        <Option value="铝板">铝板</Option>
                        <Option value="玻璃幕墙">玻璃幕墙</Option>
                        <Option value="陶瓷薄板">陶瓷薄板</Option>
                    </Select>
                    <div className="label u-m-l-30">地号</div>
                    <Input placeholder="地号" onChange={e => formChange('land_number', e.target.value)} value={form.land_number} className="u-m-l-8" style={{width: 310}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label u-m-l-5">物业主</div>
                    <Input placeholder="物业主" onChange={e => formChange('property_owner', e.target.value)} value={form.property_owner} className="u-m-l-18" style={{width: 600}} />
                    <div className="label u-m-l-30">电话</div>
                    <Input placeholder="物业主电话" onChange={e => formChange('phone1', e.target.value)} value={form.phone1} className="u-m-l-10" style={{width: 310}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label u-m-l-5">开发商</div>
                    <Input placeholder="开发商" onChange={e => formChange('developers', e.target.value)} value={form.developers} className="u-m-l-18" style={{width: 600}} />
                    <div className="label u-m-l-30">电话</div>
                    <Input placeholder="开发商电话" onChange={e => formChange('developer_phone', e.target.value)} value={form.developer_phone} className="u-m-l-10" style={{width: 310}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label u-m-l-5">停车费</div>
                    <Input placeholder="0.00" onChange={e => formChange('parking_rate', e.target.value)} value={form.parking_rate} className="u-m-l-18" style={{width: 250}} />
                    <div className="label u-m-l-5">元/月</div>
                    <div className="label u-m-l-20">车位数</div>
                    <Input placeholder="0" onChange={e => formChange('parking_num', e.target.value)} value={form.parking_num} className="u-m-l-10" style={{width: 240}} />
                    <div className="label u-m-l-5">车位配比</div>
                    <Input placeholder="车位配比" onChange={e => formChange('parking_matching', e.target.value)} value={form.parking_matching} className="u-m-l-8" style={{width: 308}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">物业公司</div>
                    <Input placeholder="物业公司" onChange={e => formChange('property_company', e.target.value)} value={form.property_company} className="u-m-l-10" style={{width: 600}} />
                    <div className="label u-m-l-30">电话</div>
                    <Input placeholder="物业公司电话" onChange={e => formChange('phone2', e.target.value)} value={form.phone2} className="u-m-l-10" style={{width: 310}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">英文名称</div>
                    <Input placeholder="英文名称" onChange={e => formChange('english_name', e.target.value)} value={form.english_name} className="u-m-l-10" style={{width: 980}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">英文地址</div>
                    <Input placeholder="英文地址" onChange={e => formChange('english_address', e.target.value)} value={form.english_address} className="u-m-l-10" style={{width: 980}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">周边环境</div>
                    <TextArea placeholder="周边环境" onChange={e => formChange('environment', e.target.value)} value={form.environment} className="u-m-l-10" style={{width: 980, height: 50}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">学校教育</div>
                    <TextArea placeholder="学校教育" onChange={e => formChange('education', e.target.value)} value={form.education} className="u-m-l-10" style={{width: 980, height: 50}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">休闲娱乐</div>
                    <TextArea placeholder="休闲娱乐" onChange={e => formChange('recreation', e.target.value)} value={form.recreation} className="u-m-l-10" style={{width: 980, height: 50}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">交通设施</div>
                    <TextArea placeholder="交通设施" onChange={e => formChange('traffic', e.target.value)} value={form.traffic} className="u-m-l-10" style={{width: 980, height: 50}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">商业百货</div>
                    <TextArea placeholder="商业百货" onChange={e => formChange('business', e.target.value)} value={form.business} className="u-m-l-10" style={{width: 980, height: 50}} />
                </div>
                <div className="u-flex u-row-center u-m-t-10">
                    <Button type="primary" onClick={update}>保存</Button>
                    <Button type="primary" ghost className="u-m-l-20" onClick={() => close(!1)}>取消</Button>
                </div>
            </div>
        )
    )
    function detail(){
        http('estate.one', {
            ids: id
        }).then(res => {
            if(res.code === 1){
                setForm(res.data)
                setShow(!0)
            }
        })
    }
    function update(){
        let url = !id ? 'estate.add' : 'estate.edit'
        http(url, {
            row: form
        }).then(res => {
            if(res.code === 1){
                notification.success({
                    message: '提示',
                    description: res.msg || '操作成功'
                })
                change(!1)
                refresh()
                setId(res.data)
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
        })
    }
    // function cityChange(city, region, area){
    //     let newForm = JSON.parse(JSON.stringify(form))
    //     newForm.city = city
    //     newForm.region = region
    //     newForm.area = area
    //     setForm(newForm)
    // }
    function formChange(name, value){
        let newForm = JSON.parse(JSON.stringify(form))
        newForm[name] = value
        setForm(newForm)
    }
}

export default Tab1_1